<template>
	<view>
		<view v-for="(item,index) in list" class="list" :class="{'item':!on,'h-flex-2':!on}">
			<view class=" " :class="{'m-r':index%2==0 && !on,'m-l':index%2!=0 && !on}">
				<product v-if="flag==1" :info="item" :on="on" :class="{'product-on':on,'product':!on}" :add='add' />
				<jdProduct v-else-if="flag==2" :info="item" :on="on" :class="{'product-on':on,'product':!on}" />
				<homeProduct v-else-if="flag==3" :info="item" :on="on" :class="{'product-on':on,'product':!on}" />
				<pingProduct v-else :info="item" :on="on" :class="{'product-on':on,'product':!on}" />
			</view>
		</view>
	</view>
</template>

<script>
	import product from '@/components/product.vue'
	import homeProduct from '@/components/homeProduct.vue'
	import jdProduct from '@/components/jdProduct.vue'
	import pingProduct from '@/components/pingProduct.vue'
	export default {
		components: {
			product,
			jdProduct,
			homeProduct,
			pingProduct
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			add: {
				type: Number,
				default: 0
			},
			on: {
				type: Boolean,
				default: false
			},
			flag: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {}
		}
	}
</script>

<style scoped lang="scss">
	.item {}

	.list {
		width: 100%;
		display: inline-block;
		margin-bottom: 20rpx;
	}

	.product-on {}

	.product {
		width: 100%;
	}


	.h-flex-2 {
		width: calc(50%);
	}

	.m-l {
		margin-left: 10rpx;
	}

	.m-r {
		margin-right: 10rpx;
	}
</style>
